<template>
  <doc-alert title="会员手册（功能开启）" url="https://doc.iocoder.cn/member/build/" />

  <ContentWrap>
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="hideId" v-show="false">
        <el-input v-model="formData.id" />
      </el-form-item>

      <el-tabs>
        <el-tab-pane label="积分">
          <el-form-item label="积分抵扣开关" prop="pointTradeDeductEnable">
            <el-switch
              v-model="formData.pointTradeDeductEnable"
              :active-value="true"
              :inactive-value="false"
              active-text="开启"
              inactive-text="关闭"
              :inline-prompt="false"
            />
            <el-text class="w-full" size="small" type="info"
              >下单时积分<span class="text-red-400">{{
                formData.pointTradeDeductEnable ? '可以抵用' : '不能抵用'
              }}</span
              >订单金额</el-text
            >
          </el-form-item>
          <el-form-item
            v-if="formData.pointTradeDeductEnable"
            label="积分抵扣比"
            prop="pointTradeDeductUnitPrice"
          >
            <el-input-number
              v-model="computedPointTradeDeductUnitPrice"
              placeholder="请输入积分抵扣金额"
              :min="0.01"
              :max="99999999"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              下单时积分<span class="text-red-400">
                1 个可抵扣 {{ computedPointTradeDeductUnitPrice }} 元</span
              >
            </el-text>
          </el-form-item>
          <el-form-item
            v-if="formData.pointTradeDeductEnable"
            label="积分抵扣最大值"
            prop="pointTradeDeductMaxPoint"
          >
            <el-input-number
              v-model="formData.pointTradeDeductMaxPoint"
              placeholder="请输入积分抵扣最大值"
              :min="0"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              单次下单积分使用上限，商家设置的积分价格实际抵扣积分<span class="text-red-400">{{
                formData.pointTradeDeductMaxPoint
                  ? '不会超过' + formData.pointTradeDeductMaxPoint + '个'
                  : '不受限制'
              }}</span>
            </el-text>
          </el-form-item>
          <el-form-item label="打折返积分比" prop="pointTradeGiveUnitPointForSeller">
            <el-input-number
              v-model="computedPointTradeGiveUnitPointForSeller"
              placeholder="请输入打折差价多少元返 1 个积分"
              :min="0"
              :max="99999999"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              售卖出产品后打折部分<span class="text-red-400"
                >与原价每相差 {{ computedPointTradeGiveUnitPointForSeller }} 元返商家 1 个积分</span
              >
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <!-- <el-tab-pane label="经验">
          <el-form-item label="拉新送经验值" prop="experienceInviteGiveExperience">
            <el-input-number
              v-model="formData.experienceInviteGiveExperience"
              placeholder="请输入邀请新用户后得到的经验值"
              :min="0"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              每成功<span class="text-red-400"
                >邀请一个新用户后得到 {{ formData.experienceInviteGiveExperience }} 个经验值</span
              >
            </el-text>
          </el-form-item>
        </el-tab-pane> -->
        <el-tab-pane label="联盟豆">
          <el-form-item label="入驻送联盟豆" prop="giveCryptocurrencyFreezing">
            <el-input-number
              v-model="formData.giveCryptocurrencyFreezing"
              placeholder="请输入入驻送联盟豆"
              :min="0"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              商家入驻时<span class="text-red-400"
                >赠送冻结中的联盟豆 {{ formData.giveCryptocurrencyFreezing }} 个</span
              >
            </el-text>
          </el-form-item>
          <el-form-item label="拉人送联盟豆" prop="inviteGiveCryptocurrency">
            <el-input-number
              v-model="formData.inviteGiveCryptocurrency"
              placeholder="请输入拉人送联盟豆"
              :min="0"
              :max="99999999"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              成功邀请一个新用户时<span class="text-red-400"
                >赠送可用的联盟豆 {{ formData.inviteGiveCryptocurrency }} 个</span
              >（会员拉人才送，普通用户拉人不送）
            </el-text>
          </el-form-item>
          <el-form-item label="现金抵扣开关" prop="cryptocurrencyTradeDeductEnable">
            <el-switch
              v-model="formData.cryptocurrencyTradeDeductEnable"
              :active-value="true"
              :inactive-value="false"
              active-text="开启"
              inactive-text="关闭"
              :inline-prompt="false"
            />
            <el-text class="w-full" size="small" type="info"
              >下单时联盟豆<span class="text-red-400">{{
                formData.cryptocurrencyTradeDeductEnable ? '可以抵用' : '不能抵用'
              }}</span
              >订单金额</el-text
            >
          </el-form-item>
          <el-form-item
            v-if="formData.cryptocurrencyTradeDeductEnable"
            label="现金抵扣比例"
            prop="cryptocurrencyTradeDeductUnitPrice"
          >
            <el-input-number
              v-model="computedCryptocurrencyTradeDeductUnitPrice"
              placeholder="请输入现金抵扣比例"
              :min="0"
              :max="99999999"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              在商城购买产品时<span class="text-red-400"
                >联盟豆 1 个可抵用 {{ computedCryptocurrencyTradeDeductUnitPrice }} 元</span
              >
            </el-text>
          </el-form-item>
          <el-form-item label="转收益豆提示" prop="cryptocurrencyNotIncrementTips">
            <editor
              v-model="formData.cryptocurrencyNotIncrementTips"
              mode="simple"
              height="150px"
              placeholder="请输入转收益豆提示语"
            />
            <el-text class="w-full" size="small" type="info">
              原则上联盟豆需要<span class="text-red-400">按1:1转换为收益豆后才能当钱花</span
              >，因此联盟豆挂卖或用联盟豆兑换产品后将自动变为收益豆。
            </el-text>
          </el-form-item>
          <el-form-item label="投入预设金额" prop="cryptocurrencyIncrementPresetAmounts">
            <el-input
              v-model="computeCryptocurrencyIncrementPresetAmounts"
              placeholder="请输入投入预设金额"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              投入收益池预设金额，
              <span class="text-red-400">用英文逗号“,”分隔。</span>
            </el-text>
          </el-form-item>
          <el-form-item label="投入增值提示" prop="cryptocurrencyIncrementTips">
            <editor
              v-model="formData.cryptocurrencyIncrementTips"
              mode="simple"
              height="150px"
              placeholder="请输入投入增值提示"
            />
            <el-text class="w-full" size="small" type="info">
              联盟豆投入收益池增值转化为收益豆时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
          <el-form-item
            label="投入增值天数"
            prop="cryptocurrencyIncrementDays"
            title="多次投入的联盟豆的情况，目前是把多个任务合在一起处理，每日看完广告就完成所有任务。为保持数据一致，不能修改增值天数。"
          >
            <el-input-number
              v-model="formData.cryptocurrencyIncrementDays"
              :min="1"
              :max="99999999"
              placeholder="请输入投入增值天数"
              :disabled="true"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              联盟豆投入收益池增值，<span class="text-red-400">
                做任务周期为 {{ formData.cryptocurrencyIncrementDays }} 天</span
              >
            </el-text>
          </el-form-item>
          <el-form-item
            label="投入增值比例"
            prop="cryptocurrencyIncrementPercent"
            title="多次投入的联盟豆的情况，目前是把多个任务合在一起处理，每日看完广告就完成所有任务。为保持数据一致，不能修改增值比例。"
          >
            <el-input-number
              v-model="formData.cryptocurrencyIncrementPercent"
              :min="1"
              :max="99999999"
              :precision="2"
              placeholder="请输入投入增值比例"
              :disabled="true"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              联盟豆投入收益池增值，<span class="text-red-400">
                100 个联盟豆可以增长 {{ formData.cryptocurrencyIncrementPercent }} 个收益豆</span
              >
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="收益豆">
          <el-form-item label="现金兑换比例" prop="cryptocurrencyToMoneyPercent">
            <el-input-number
              v-model="formData.cryptocurrencyToMoneyPercent"
              placeholder="请输入收益豆兑现比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              兑现需收手续金币，
              <span v-if="formData.cryptocurrencyToMoneyPercent > 0" class="text-red-400">
                1 个收益豆可兑换现金 {{ fenToYuan(formData.cryptocurrencyToMoneyPercent) }} 元</span
              >
              <span v-else class="text-red-400">不可兑换为现金</span>
            </el-text>
          </el-form-item>
          <el-form-item label="现金兑换提示" prop="cryptocurrencyToMoneyTips">
            <editor
              v-model="formData.cryptocurrencyToMoneyTips"
              mode="simple"
              height="150px"
              placeholder="请输入收益豆兑现提示"
            />
            <el-text class="w-full" size="small" type="info">
              收益豆兑换为现金时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
          <el-form-item label="分红转化比例" prop="cryptocurrencyToBonusPercent">
            <el-input-number
              v-model="formData.cryptocurrencyToBonusPercent"
              placeholder="请输入分红转化比例"
              :min="1"
              :max="100"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              使用收益豆抵用现金兑换产品后
              <span v-if="formData.cryptocurrencyToBonusPercent > 0" class="text-red-400">
                100 个收益豆可转化为 {{ formData.cryptocurrencyToBonusPercent }} 个分红值</span
              >
              <span v-else class="text-red-400">不可转化为分红值</span>
            </el-text>
          </el-form-item>
          <el-form-item label="分红转化提示" prop="cryptocurrencyToBonusTips">
            <editor
              v-model="formData.cryptocurrencyToBonusTips"
              mode="simple"
              height="150px"
              placeholder="请输入分红转化提示"
            />
            <el-text class="w-full" size="small" type="info">
              使用收益豆抵用现金兑换产品后返分红值时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="分红">
          <el-form-item label="现金兑换比例" prop="bonusToMoneyPercent">
            <el-input-number
              v-model="formData.bonusToMoneyPercent"
              placeholder="请输入分红兑现比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              兑现需收手续金币，
              <span v-if="formData.bonusToMoneyPercent > 0" class="text-red-400">
                1 个分红可兑换现金 {{ fenToYuan(formData.bonusToMoneyPercent) }} 元</span
              >
              <span v-else class="text-red-400">不可兑换为现金</span>
            </el-text>
          </el-form-item>
          <el-form-item label="现金兑换提示" prop="bonusToMoneyTips">
            <editor
              v-model="formData.bonusToMoneyTips"
              mode="simple"
              height="150px"
              placeholder="请输入分红兑现提示"
            />
            <el-text class="w-full" size="small" type="info">
              分红兑换为现金时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
          <el-form-item label="勋章转化比例" prop="bonusToShareholdingPercent">
            <el-input-number
              v-model="formData.bonusToShareholdingPercent"
              placeholder="请输入勋章转化比例"
              :min="1"
              :max="100"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              使用分红兑换现金分红后
              <span v-if="formData.bonusToShareholdingPercent > 0" class="text-red-400">
                100 个分红可转化为 {{ formData.bonusToShareholdingPercent }} 个公益勋章</span
              >
              <span v-else class="text-red-400">不可转化为公益勋章</span>
            </el-text>
          </el-form-item>
          <el-form-item label="勋章转化提示" prop="bonusToShareholdingTips">
            <editor
              v-model="formData.bonusToShareholdingTips"
              mode="simple"
              height="150px"
              placeholder="请输入勋章转化提示"
            />
            <el-text class="w-full" size="small" type="info">
              使用分红兑换现金分红后返公益勋章时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
          <el-form-item label="分红权开通天数" prop="bonusBenefitDays">
            <el-input-number
              v-model="formData.bonusBenefitDays"
              placeholder="请输入分红权开通天数"
              :min="0"
              :max="99999999"
              :step="1"
              :precision="0"
              class="w-80!"
            />
          </el-form-item>
          <el-form-item label="分红权开通费用" prop="bonusBenefitPrice">
            <el-input-number
              v-model="computedBonusBenefitPrice"
              placeholder="请输入分红权开通费用"
              :min="0"
              :max="99999999"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              商家通过积累贡献值到一定数量后可
              <span class="text-red-400">
                缴纳费用 {{ computedBonusBenefitPrice }} 元/
                {{ formData.bonusBenefitDays }} 天</span
              >
              开通月度分红权益。
            </el-text>
          </el-form-item>
          <el-form-item label="分红权开通提示" prop="bonusBenefitTips">
            <editor
              v-model="formData.bonusBenefitTips"
              mode="simple"
              height="150px"
              placeholder="请输入分红权开通提示"
            />
            <el-text class="w-full" size="small" type="info">
              商家通过积累贡献值到一定数量后开通月度分红权益时的<span class="text-red-400"
                >提示语</span
              >
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="公益勋章">
          <el-form-item label="勋章发行价格" prop="shareholdingInitialPrice">
            <el-input-number
              v-model="computedShareholdingInitialPrice"
              placeholder="请输入勋章发行价格"
              :min="0.01"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              公益勋章初始发行价格，
              <span v-if="formData.shareholdingToInterestPercent > 0" class="text-red-400">
                1 个公益勋章价值 {{ computedShareholdingInitialPrice }} 元</span
              >
              <span v-else class="text-red-400">不可产出股权及公益勋章</span>
            </el-text>
          </el-form-item>
          <el-form-item label="勋章增长比例" prop="shareholdingToInterestPercent">
            <el-input-number
              v-model="formData.shareholdingToInterestPercent"
              placeholder="请输入勋章增长比例"
              :min="1"
              :max="100"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              公益勋章双边增长，
              <span v-if="formData.shareholdingToInterestPercent > 0" class="text-red-400">
                100 个公益勋章每日可产生
                {{ formData.shareholdingToInterestPercent }} 个股权及消费金</span
              >
              <span v-else class="text-red-400">不可产出股权及公益勋章</span>
            </el-text>
          </el-form-item>
          <el-form-item label="勋章增长提示" prop="shareholdingToInterestTips">
            <editor
              v-model="formData.shareholdingToInterestTips"
              mode="simple"
              height="150px"
              placeholder="请输入勋章增长提示"
            />
            <el-text class="w-full" size="small" type="info">
              公益勋章每日产出股权及消费金的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="消费金">
          <el-form-item label="现金兑换比例" prop="interestToMoneyPercent">
            <el-input-number
              v-model="formData.interestToMoneyPercent"
              placeholder="请输入消费金兑现比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="2"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              兑现需收手续金币，
              <span v-if="formData.bonusToMoneyPercent > 0" class="text-red-400">
                1 个消费金可兑换现金 {{ fenToYuan(formData.interestToMoneyPercent) }} 元</span
              >
              <span v-else class="text-red-400">不可兑换为现金</span>
            </el-text>
          </el-form-item>
          <el-form-item label="现金兑换提示" prop="interestToMoneyTips">
            <editor
              v-model="formData.interestToMoneyTips"
              mode="simple"
              height="150px"
              placeholder="请输入消费金兑现提示"
            />
            <el-text class="w-full" size="small" type="info">
              消费金兑换为现金时的<span class="text-red-400">提示语</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="其他">
          <el-form-item label="手续金币比例" prop="handlingFeePercent">
            <el-input-number
              v-model="formData.handlingFeePercent"
              placeholder="请输入手续金币比例"
              :min="0"
              :max="100"
              :step="1"
              :precision="0"
              class="w-80!"
            />
            <el-text class="w-full" size="small" type="info">
              手续金币通过购买公益产品获得，
              <span v-if="formData.handlingFeePercent > 0" class="text-red-400">
                兑换现金 100 元需要收取 {{ formData.handlingFeePercent }} 个手续金币。</span
              >
              <span v-else class="text-red-400">不可兑换为现金。</span>
            </el-text>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
</template>
<script lang="ts" setup>
import * as ConfigApi from '@/api/member/config'
import { fenToYuan, yuanToFen } from '@/utils'

defineOptions({ name: 'MemberConfig' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formData = ref<any>({
  id: undefined,
  pointTradeDeductEnable: true,
  pointTradeDeductUnitPrice: 0,
  pointTradeDeductMaxPoint: 0,
  //pointTradeGiveUnitPoint: 0,
  pointTradeGiveUnitPointForSeller: 0,
  experienceInviteGiveExperience: 0,
  giveCryptocurrencyFreezing: 0,
  inviteGiveCryptocurrency: 0,
  cryptocurrencyNotIncrementTips: '',
  cryptocurrencyIncrementPresetAmounts: [],
  cryptocurrencyIncrementTips: '',
  cryptocurrencyIncrementDays: 0,
  cryptocurrencyIncrementPercent: 0,
  cryptocurrencyTradeDeductEnable: true,
  cryptocurrencyTradeDeductUnitPrice: 0,
  cryptocurrencyToMoneyPercent: 0,
  cryptocurrencyToMoneyTips: '',
  cryptocurrencyToBonusPercent: 0,
  cryptocurrencyToBonusTips: '',
  bonusToShareholdingPercent: 0,
  bonusToShareholdingTips: '',
  bonusToMoneyPercent: 0,
  bonusToMoneyTips: '',
  bonusBenefitDays: 365,
  bonusBenefitPrice: 0,
  bonusBenefitTips: '',
  shareholdingInitialPrice: 0,
  shareholdingToInterestPercent: 0,
  shareholdingToInterestTips: '',
  interestToMoneyPercent: 0,
  interestToMoneyTips: '',
  handlingFeePercent: 20
})

const computedPointTradeDeductUnitPrice = computed({
  get: () => Number(fenToYuan(formData.value.pointTradeDeductUnitPrice)),
  set: (newValue: number) => {
    formData.value.pointTradeDeductUnitPrice = yuanToFen(newValue)
  }
})
const computedPointTradeGiveUnitPointForSeller = computed({
  get: () => Number(fenToYuan(formData.value.pointTradeGiveUnitPointForSeller)),
  set: (newValue: number) => {
    formData.value.pointTradeGiveUnitPointForSeller = yuanToFen(newValue)
  }
})

const computeCryptocurrencyIncrementPresetAmounts = computed({
  get: () =>
    formData.value.cryptocurrencyIncrementPresetAmounts
      ? formData.value.cryptocurrencyIncrementPresetAmounts.join(',')
      : '',
  set: (newValue: string) => {
    formData.value.cryptocurrencyIncrementPresetAmounts = newValue ? newValue.split(',') : []
  }
})
const computedCryptocurrencyTradeDeductUnitPrice = computed({
  get: () => Number(fenToYuan(formData.value.cryptocurrencyTradeDeductUnitPrice)),
  set: (newValue: number) => {
    formData.value.cryptocurrencyTradeDeductUnitPrice = yuanToFen(newValue)
  }
})
const computedBonusBenefitPrice = computed({
  get: () => Number(fenToYuan(formData.value.bonusBenefitPrice)),
  set: (newValue: number) => {
    formData.value.bonusBenefitPrice = yuanToFen(newValue)
  }
})
const computedShareholdingInitialPrice = computed({
  get: () => Number(fenToYuan(formData.value.shareholdingInitialPrice)),
  set: (newValue: number) => {
    formData.value.shareholdingInitialPrice = yuanToFen(newValue)
  }
})

const formRules = reactive({})
const formRef = ref() // 表单 Ref

/** 修改配置 */
const onSubmit = async () => {
  // 校验表单
  if (!formRef) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value
    await ConfigApi.saveConfig(data)
    message.success(t('common.updateSuccess'))
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

/** 获得配置 */
const getConfig = async () => {
  try {
    const data = await ConfigApi.getConfig()
    if (data === null) {
      return
    }
    Object.assign(formData.value, data)
  } finally {
  }
}

onMounted(() => {
  getConfig()
})
</script>
